import React from 'react';
// 导入发布评论组件
import CmtPost from './CmtPost';
// 导入评论组件
import CmtItem from './CmtItem';
export default class CmtList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            commentList:[
                {
                    id:1,
                    content:'生活只有童年如此艰辛还是?不,生活总是如此',
                    author:'张三',
                    posttime:new Date().toLocaleDateString()
                },
                {
                    id:2,
                    content:'我想住进你的心里, 没有邻居那种',
                    author:'李四',
                    posttime:new Date().toLocaleDateString()
                },
                {
                    id:3,
                    content:'我将于茫茫人海中访我唯一灵魂之伴侣, 得之我幸, 不得命我命',
                    author:'王五',
                    posttime:new Date().toLocaleDateString()
                }
            ]    
        }
    }
    render() {
        return <div className="container">
            <h1>评论管理</h1>
            <ul className="list-group">
                {/* 评论单项组件 */}
                {this.state.commentList.map((item)=>(
                    <CmtItem {...item} key={item.id}></CmtItem>
                ))}
            </ul>
            {/* 发布评论组件 */}
            <CmtPost addComment={(comment)=>this.addComment(comment)}></CmtPost>
        </div>
    }


    addComment(comment){
        this.setState({
            commentList:[comment].concat(this.state.commentList)
        });
    }
}